import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

// 导出store对象
export default new Vuex.Store({
  // 用来存储状态数据
  state: {
    msg:'welcome to vue',
    list:[1,2,3,4]
  },
  // 用来获取从state中派生出来的状态数据，依赖于state，类似于计算属性
  getters:{
    reverseMsg(state){
      return state.msg.toUpperCase().split(' ').reverse().join(' ')
    }
  },
  // 用来改变状态数据，必须是同步操作
  mutations: {
    // setMsg相当于是一个自定义的事件类型
    setMsg(state,newValue){ // 第一个参数固定的为state，第二个参数为修改后的值
      state.msg = newValue
    }
  },
  // 用来改变状态数据，可以包含异步操作
  actions: {
    loadUser(context,uid){ // 第一个参数固定的为context
      // console.log(context) // context是一个与store对象具有相同属性和方法的对象
      axios.get(`https://gitee.com/api/v5/users/${uid}`)
        .then( res => {
          // console.log(res)
          // context.state.msg = res.data.name // 不要直接修改状态数据，而是要提交mutation
          context.commit('setMsg',res.data.name)
        })
    }
  },
  modules: {
  }
})
